<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <com-a></com-a>
    <com-b></com-b>
</div>
</body>
</html>
<script src="../js/vue.min.js"></script>
<script>
    let bus = new Vue()
    Vue.component('com-a', {
        data() {
            return {
                com_a_content: '我是组件com-a中的变量'
            }
        },
        methods: {
            fun_a() {
                // 送
                bus.$emit('abc', this.com_a_content)
            }
        },
        template: `
          <div>
            <h2>组件com-a</h2>
            <button @click="fun_a">点我</button>
          </div>
        `
    })

    Vue.component('com-b', {
        data() {
            return {
                com_b_content: ''
            }
        },
        created() {
            // 接
            bus.$on('abc', (param) => {
                this.com_b_content = param
            })
        },
        template: `
          <div>
            <h2>组件com-b</h2>
            {{ com_b_content }}
          </div>
        `
    })
    new Vue({
        el: '#app',
        data() {
            return {}
        }
    })
</script>